import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import axios from "../axios";
import store from "@/store";

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home,
        children: [
            {
                path: '/index',
                name: 'Index',
                meta: {
                    title: "首页"
                },
                component: () => import('../views/Index.vue')
            },
            {
                path: '/userCenter',
                name: 'UserCenter',
                meta: {
                    title: "个人中心"
                },
                component: () => import('../views/UserCenter.vue')
            },
            // {
            //     path: '/sys/users',
            //     name: 'SysUser',
            //     component: () => import('../views/sys/User.vue')
            // },
            // {
            //     path: '/sys/roles',
            //     name: 'SysRole',
            //     component: () => import('../views/sys/Role.vue')
            // },
            // {
            //     path: '/sys/menus',
            //     name: 'SysMenu',
            //     component: () => import('../views/sys/Menu.vue')
            // },
        ]
    },
    {
        path: '/login',
        name: 'Login',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import('../views/Login.vue')
    },

]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

router.beforeEach((to, from, next) => {

    let hasRoute = store.state.menus.hasRoute

    let token = localStorage.getItem("token")

    if (to.path == '/login') {
        next()
    } else if (!token) {
        next({path: '/login'})
    } else if (token && !hasRoute) {
        axios.get("/sys/menu/nav", {
            headers: {
                Authorization: localStorage.getItem("token")
            }
        }).then(res => {
            // 拿到menuList
            store.commit("SET_MENU_LIST", res.data.data.nav)

            //  拿到用户权限
            store.commit("SET_PERM_LIST", res.data.data.authoritys)

            // 动态绑定路由
            let newRoutes = router.options.routes

            res.data.data.nav.forEach(menu => {
                if (menu.children) {
                    menu.children.forEach(e => {

                        // 转成路由
                        let route = menuToRoute(e)

                        // 把路由添加到路由管理中
                        if (route) {
                            newRoutes[0].children.push(route)
                        }
                    })
                }
            })
            router.addRoutes(newRoutes)

            hasRoute = true
            store.commit("CHANGE_ROUTE_STATUS", hasRoute)
        })
    }

    next()
})


/**
 * 导航转成路由
 * @param menu
 * @returns {{path, meta: {icon, title}, name}|null}
 */
const menuToRoute = (menu) => {

    if (!menu.component) {
        return null
    }

    let route = {
        name: menu.name,
        path: menu.path,
        meta: {
            icon: menu.icon,
            title: menu.title
        }
    }

    route.component = () => import('@/views/' + menu.component + '.vue')

    return route
}

export default router
